<template>
	<div class="">
		<indexPc class="kuai_wz_pc" v-if="!isMobileDevice"></indexPc>
		<div
			v-else
			class="kuai_wz_mobile Main width_1200 margin_auto flex justify_content_sb"
			style="padding-bottom: 20px"
		>
			<div class="MainLeft" v-if="informationDetails.content != null">
				<div class="wz_detail_pc">
					<div class="wz_detail_pc_content">
						<div
							class="wz_detail_pc_content_title"
							:prohibitTran="informationDetails.prohibit_tran"
						>
							{{
								localLanguage == 2
									? informationDetails.title
										? informationDetails.title
										: informationDetails.title
									: informationDetails.title
							}}
						</div>
						<div class="wz_detail_pc_content_info flex align_items_c">
							<div
								v-if="
									informationDetails.author != null &&
									informationDetails.author.avatar_img != null
								"
							>
								<img
									:src="informationDetails.author.avatar_img"
									alt=""
									class="wz_detail_pc_content_img"
								/>
							</div>
							<div
								v-if="
									informationDetails.author != null &&
									informationDetails.author.nickname != null
								"
								>{{ informationDetails.author.nickname }}
							</div>
							<div>·</div>
							<div v-if="informationDetails.release_time != null">
								{{
									this.$utils.convertToLocalTime(
										informationDetails.release_time
									)
								}}
							</div>
							<div v-if="informationDetails.source_type > 1">·</div>
							<div>{{
								informationDetails.source_type == 2 ||
								informationDetails.source_type == 10
									? "律动BlockBeats"
									: informationDetails.source_type == 3
									? "Odaily星球日报"
									: informationDetails.source_type == 4
									? "PANews"
									: informationDetails.source_type == 6
									? "Followin"
									: informationDetails.source_type == 7
									? "吴说区块链"
									: informationDetails.source_type == 11
									? "深潮TechFlow"
									: ""
							}}</div>
						</div>
						<div class="wz_detail_pc_content_main">
							<div class="wz_detail_pc_content_left">
								<div
									class="flex align_items_c justify_content_c fx pointer wz_detail_pc_content_zan"
									@click="collectionInformation()"
								>
									<img
										class="wz_detail_pc_content_left_zan"
										src="https://res.metaera.hk/resources/assets/images/kxwz/like.png"
										alt=""
										v-if="this.informationDetails.is_collection == 0"
									/>
									<img
										class="wz_detail_pc_content_left_zan"
										src="https://res.metaera.hk/resources/assets/images/kxwz/kxwz_zan1_2.png"
										alt=""
										v-if="this.informationDetails.is_collection == 1"
									/>
								</div>
								<div
									class="flex align_items_c justify_content_c fx pointer wz_detail_pc_content_line"
								>
								</div>
								<div
									class="flex align_items_c justify_content_c fx pointer wz_detail_pc_content_wechat"
									@click="copyText(informationDetails.id)"
									@mouseenter="showLayer"
									@mouseleave="hideLayer"
								>
									<img
										src="https://res.metaera.hk/resources/assets/images/kxwz/kxwz_wechat.png"
										alt=""
									/>
								</div>

								<div v-if="isHover" class="wz_detail_pc_content_wechat_code">
									<div class="wz_detail_pc_content_wechat_code_img">
										<canvas ref="canvas"></canvas>
									</div>
									<div class="wz_detail_pc_content_wechat_code_title"
										>微信扫码</div
									>
								</div>
								<div
									class="flex align_items_c justify_content_c fx pointer wz_detail_pc_content_twitter"
									@click="twitterShare(informationDetails.id)"
								>
									<img
										src="https://res.metaera.hk/resources/assets/images/active/36.png"
										alt=""
									/>
								</div>
								<div
									class="flex align_items_c justify_content_c fx pointer wz_detail_pc_content_copy"
									@click="copyText(informationDetails.id)"
								>
									<img
										src="https://res.metaera.hk/resources/assets/images/home/686.png"
										alt=""
									/>
								</div>
							</div>
							<div class="kx_detail_pc_content_right">
								<div class="wz_detail_pc_content_txt ql-snow">
									<p
										class="ql-editor"
										:prohibitTran="informationDetails.prohibit_tran"
										v-html="processedContent()"
										ref="contentContainer"
									></p>
								</div>
								<div class="kxItem_img" v-if="informationDetails.pic != null">
									<img :src="informationDetails.pic" alt="" />
								</div>
								<div
									class="wz_detail_pc_content_tip"
									v-if="informationDetails.id != null"
								>
									本文内容仅为市场资讯、作者个人或相关方观点，不代表平台的立场或观点，亦不构成任何投资或理财建议。更多信息，请参阅<span
										@click="
											showPreView(
												'https://res.metaera.hk/resources/serviceagreement.html'
											)
										"
										style="
											cursor: pointer;
											color: #0056ff;
											font-size: 12px;
											min-width: 90px;
										"
										>《服务条款》</span
									>和<span
										@click="
											showPreView(
												'https://res.metaera.hk/resources/privacypolicy.html'
											)
										"
										style="
											cursor: pointer;
											color: #0056ff;
											font-size: 12px;
											min-width: 90px;
										"
										>《隐私政策》 </span
									>。
								</div>
								<div
									class="wz_detail_pc_content_tip"
									v-if="informationDetails.id != null"
								>
									转载内容已注明作者和出处，如涉及侵权请联系<span
										@click="sendEmail('content@metaera.hk')"
										style="cursor: pointer; color: #0056ff"
									>
										content@metaera.hk </span
									>删除。
								</div>
							</div>
						</div>
					</div>
					<div class="wz_detail_pc_content_bottom">
						<div class="wz_detail_pc_content_bottom_right">
							<div
								class="wz_detail_pc_content_bottom_left_title flex justify_content_sb"
							>
								<div class="wz_detail_pc_content_bottom_left_title"
									>24小时热搜</div
								>
								<div
									class="flex align_items_c pointer"
									@click="$router.push({ path: '/search' })"
								>
									<div class="rsTitleLeft_point"></div>
									<div class="rsTitleLeft_point"></div>
									<div class="rsTitleLeft_point"></div>
								</div>
							</div>
							<div class="wz_detail_pc_content_bottom_right_content">
								<div class="" v-for="(items, indexs) in hotLists" :key="indexs">
									<wzitemsousuo :item="items"></wzitemsousuo>
								</div>
							</div>
						</div>
					</div>
				</div>

				<div class="wz_detail_app">
					<div class="kxList">
						<div class="kxItem">
							<div
								class="kxItem_1"
								:prohibitTran="informationDetails.prohibit_tran"
								>{{
									localLanguage == 2
										? informationDetails.title
											? informationDetails.title
											: informationDetails.title
										: informationDetails.title
								}}</div
							>
							<div class="flex align_items_c justify_content_sb">
								<div
									class="kxwzDate"
									v-if="informationDetails.release_time != null"
								>
									{{
										this.$utils.convertToLocalTime(
											informationDetails.release_time
										)
									}}
								</div>
								<div class="flex align_items_c wz_detail_info_right">
									<div
										class="flex align_items_c justify_content_c fx pointer wz_detail_pc_zan"
										@click="collectionInformation()"
									>
										<img
											class="wz_detail_pc_zan"
											src="https://res.metaera.hk/resources/assets/images/kxwz/like.png"
											alt=""
											v-if="this.informationDetails.is_collection == 0"
										/>
										<img
											class="wz_detail_pc_zan"
											src="https://res.metaera.hk/resources/assets/images/kxwz/kxwz_zan1_2.png"
											alt=""
											v-if="this.informationDetails.is_collection == 1"
										/>
									</div>
									<div class="wz_detail_line"> </div>
									<div
										class="flex align_items_c justify_content_c fx pointer"
										@click="copyText(informationDetails.id)"
										@mouseenter="showLayer"
										@mouseleave="hideLayer"
									>
										<img
											src="https://res.metaera.hk/resources/assets/images/kxwz/wechat.png"
											alt=""
										/>
									</div>

									<div v-if="isHover" class="wz_detail_pc_content_wechat_code">
										<div class="wz_detail_pc_content_wechat_code_img">
											<canvas ref="canvas"></canvas>
										</div>
										<div class="wz_detail_pc_content_wechat_code_title"
											>微信扫码</div
										>
									</div>
									<div
										class="flex align_items_c justify_content_c fx pointer"
										@click="twitterShare(informationDetails.id)"
									>
										<img
											src="https://res.metaera.hk/resources/assets/images/kxwz/tui_w.png"
											alt=""
										/>
									</div>
									<div
										class="flex align_items_c justify_content_c fx pointer"
										@click="copyText(informationDetails.id)"
									>
										<img
											src="https://res.metaera.hk/resources/assets/images/kxwz/link_w.png"
											alt=""
										/>
									</div>
								</div>
							</div>
							<div class="kxItem_2 ql-snow">
								<p
									class="ql-editor"
									:prohibitTran="informationDetails.prohibit_tran"
									v-html="processedContent()"
									ref="contentContainer"
								></p>
							</div>

							<div
								class="btnitem"
								v-if="informationDetails.url"
								@click="showPreView(informationDetails.url)"
							>
								原文链接
							</div>
							<div
								class="wz_detail_pc_content_author pointer"
								v-if="informationDetails.type != 2"
								@click="
									$router.push({
										name: '/home_wz',
										params: { id: userInfo.id },
									})
								"
							>
								<div class="wz_detail_pc_content_author_img">
									<img :src="userInfo.avatar_img" alt="" />
								</div>
								<div class="wz_detail_pc_content_author_name">
									<span class="wz_detail_pc_content_author_name1">{{
										userInfo.nickname
									}}</span>
									<span class="wz_detail_pc_content_author_name2">{{
										userInfo.desc
									}}</span>
								</div>
								<div class="arrow-box">
									<img
										src="https://res.metaera.hk/resources/assets/images/aboutus/right_arrow.svg"
									/>
								</div>
							</div>
							<div class="wz_detail_content_tag flex">
								<div
									v-for="(item, index) in informationDetails.label_info"
									:key="index"
									class="MainLeft_6_item pointer align_items_c"
									@click="toLabel(item)"
								>
									{{ item.name }}
								</div>
							</div>
							<div
								class="wz_detail_pc_tip"
								v-if="informationDetails.id != null"
							>
								本文内容仅为市场资讯、作者个人或相关方观点，不代表平台的立场或观点，亦不构成任何投资或理财建议。更多信息，请参阅<span
									@click="
										showPreView(
											'https://res.metaera.hk/resources/serviceagreement.html'
										)
									"
									style="
										cursor: pointer;
										color: #0056ff;
										font-size: 12px;
										min-width: 70px;
									"
									>《服务条款》</span
								>和<span
									@click="
										showPreView(
											'https://res.metaera.hk/resources/privacypolicy.html'
										)
									"
									style="
										cursor: pointer;
										color: #0056ff;
										font-size: 12px;
										min-width: 70px;
									"
									>《隐私政策》 </span
								>。
							</div>
							<div
								class="wz_detail_pc_tip"
								v-if="informationDetails.id != null"
							>
								转载内容已注明作者和出处，如涉及侵权请联系<span
									@click="sendEmail('content@metaera.hk')"
									style="cursor: pointer; color: #0056ff; font-size: 12px"
								>
									content@metaera.hk </span
								>删除。
							</div>
						</div>
					</div>

					<div class="MainLeft_tuijian" v-if="informationDetails.type != 1">
						<div class="MainLeft_tuijian_title">热门文章</div>
						<div class="" v-for="(items, indexs) in hotLists" :key="indexs">
							<PerMobileNews :item="items"></PerMobileNews>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import Vue from "vue";
import Viewer from "viewerjs";
import "viewerjs/dist/viewer.css";
import {
	getInformationDetails,
	collectionInformation,
	cancelCollectionInformation,
} from "@/api/home";
import { homeHotList, getRecommendLists, toUserInfo } from "@/api/home";
import start from "@/components/scare.vue";
import { myMixin } from "@/utils/mixin.js";
import { getShareSignaTure } from "@/api/user";
import clipboard from "clipboard";
import { getToken } from "@/utils/auth";
import PerMobileNews from "@/components/mobile/perMobileNews";
import wzitemsousuo from "./../../components/pc/wzitemsousuo.vue";
import wzitem from "./../../components/pc/wzitem.vue";
import QRCode from "qrcode";
import { newBus } from "../../components/pc/topHeader2.vue";
import ChineseConv from "chinese-s2t";
import indexPc from "./index_pc.vue";
import wx from "weixin-js-sdk";

export default {
	mixins: [myMixin],
	name: "",
	data() {
		return {
			userInfo: {},
			author_id: "",
			informationDetails: {},
			text: "",
			id: "",
			isHover: false,
			hotLists: [],
			recommendLists: [],
			localLanguage: 1,
			sharetitle:
				this.$route.query.title == null
					? "Web3媒体| 加密货币资讯| 区块链新闻| MetaEra"
					: this.$route.query.title,
			sharedescs:
				"获取最新的Web3行情资讯和实时新闻，尽在MetaEra，您的区块链媒体首选平台。关注我们，掌握行业动态！",
			wxsharelink: location.href,
			shareimg: "https://res.metaera.hk/resources/logo_share.png",
		};
	},
	components: {
		start,
		wzitemsousuo,
		wzitem,
		indexPc,
		PerMobileNews,
	},
	created() {
		this.id = this.$route.params.id;
		this.getInformationDetails(this.id);
		this.$router.beforeEach((to, from, next) => {
			if (to.name == "/kuaixun_wz" && this.id != to.query.id) {
				this.id = to.query.id;
				this.informationDetails = {};
				this.getInformationDetails(this.id);
			}
			next();
		});

		// 在 Vue.js 中监听路由变化
		this.$router.afterEach((to, from) => {
			// 更新页面的 <meta> 标签
			this.sharetitle = to.query.title;
			document
				.querySelector('meta[property="og:title"]')
				.setAttribute(
					"content",
					to.query.title == null ? "MetaEra" : to.query.title
				);
			document
				.querySelector('meta[property="og:description"]')
				.setAttribute(
					"content",
					to.query.title == null ? "MetaEra" : to.query.title
				);

			// 触发 Twitter Cards 更新
			if (typeof twttr !== "undefined") {
				twttr.widgets.load();
			}
		});
	},
	mounted() {
		newBus.$on("global-notification", (data) => {
			let localLanguage = sessionStorage.getItem("localLanguage");
			if (localLanguage == "繁体中文") {
				this.localLanguage = 1;
			} else if (localLanguage == "english") {
				this.localLanguage = 2;
			} else {
				this.localLanguage = 0;
			}
		});
		let localLanguage = sessionStorage.getItem("localLanguage");
		if (localLanguage == "繁体中文") {
			this.localLanguage = 1;
		} else if (localLanguage == "english") {
			this.localLanguage = 2;
		} else {
			this.localLanguage = 0;
		}

		document.addEventListener("click", (e) => {
			const link = e.target.closest("a");
			if (!link) return;

			const href = link.getAttribute("href");
			// 如果是不带协议的网址（如 www.kun.global）
			if (
				href &&
				!/^https?:\/\//i.test(href) &&
				(href.includes("www.") || href.includes("."))
			) {
				e.preventDefault();
				window.open("https://" + href, "_blank");
			}
		});
		this.$nextTick(() => {
			// 确保在 DOM 更新后初始化 Viewer
			if (this.$refs.contentContainer) {
				this.initViewer();
			}
		});
	},
	computed: {
		isMobileDevice() {
			return this.$store.state.app.isMobileDevice;
		},
	},
	methods: {
		initViewer() {
			// 每次内容更新后重新初始化
			if (this.viewerInstance) {
				this.viewerInstance.destroy();
			}
			this.viewerInstance = new Viewer(this.$refs.contentContainer, {
				toolbar: {
					zoomIn: 1,
					zoomOut: 1,
					oneToOne: 1,
					reset: 1,
					prev: 1,
					next: 1,
					rotateLeft: 1,
					rotateRight: 1,
					flipHorizontal: 1,
					flipVertical: 1,
				},
			});
		},
		sendEmail(url) {
			const email = url;
			const subject = "";
			const body = "";
			window.location.href = `mailto:${email}?subject=${encodeURIComponent(
				subject
			)}&body=${encodeURIComponent(body)}`;
		},
		processedContent() {
			if (!this.informationDetails.content) return "";
			const content = this.informationDetails.content.replace(
				/<img([^>]+)>/g,
				'<img$1 style="cursor: zoom-in">'
			);

			// 内容更新后初始化/重新初始化 Viewer
			this.$nextTick(() => {
				this.initViewer();
			});

			return content;
		},
		gettoUserInfo() {
			toUserInfo({ id: this.author_id })
				.then((res) => {
					if (res.code == 200) {
						this.userInfo = res.data;
					}
				})
				.catch((error) => {
					// this.$message.error(error.message);
				});
		},
		toLabel(items) {
			this.$router.push({
				path: "/gw_dex",
				query: { id: items.id },
			});
		},

		showLayer() {
			this.isHover = true;
			this.generateQRCode();
		},
		hideLayer() {
			this.isHover = false;
		},
		generateQRCode() {
			this.$nextTick(() => {
				const canvas = this.$refs.canvas;
				// const image = this.$refs.image;
				QRCode.toCanvas(
					canvas,
					"https://www.metaera.hk/kuaixun_wz?id=" + this.id,
					(error) => {
						if (error) console.error(error);
						// 将Canvas内容转换为base64编码的图像数据，并设置为img的src属性
						// image.src = canvas.toDataURL();
					}
				);
			});
		},
		twitterShare(id) {
			var sharetitle = ChineseConv.s2t(this.informationDetails.title);
			var url =
				this.informationDetails.type == 2
					? "https://web.metaera.hk/news/"
					: "https://web.metaera.hk/contents/";
			window.open(
				"http://twitter.com/share?url=" +
					encodeURIComponent(url + this.id) +
					"&text=" +
					encodeURIComponent(sharetitle) +
					"&display=popup&ref=plugin&src=share_button",
				"twitter",
				"height=500, width=750, top=" +
					100 +
					", left=" +
					100 +
					", toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no"
			);
		},
		copyText(id) {
			var url =
				this.informationDetails.type == 2
					? "https://web.metaera.hk/news/"
					: "https://web.metaera.hk/contents/";
			let msg = url + id;
			clipboard.copy(msg);
			this.$message({ message: "复制成功", type: "success" });
		},
		showPreView(url) {
			window.open(url, "");
		},
		homeHotList() {
			homeHotList({})
				.then((res) => {
					if (res.code == 200) {
						this.hotLists = res.data.hotLists;
					} else {
					}
				})
				.catch((error) => {});
		},
		getRecommendLists() {
			getRecommendLists({ page: 1, size: 10 })
				.then((res) => {
					if (res.code == 200) {
						this.recommendLists = res.data.list;
					}
				})
				.catch((error) => {
					// this.$message.error(error.message);
				});
		},
		collectionInformation() {
			const hasToken = getToken();
			if (hasToken) {
				if (this.informationDetails.is_collection == 0) {
					collectionInformation({ information_id: this.$route.params.id })
						.then((res) => {
							if (res.code == 200) {
								this.iscollect = true;
								this.getInformationDetails(this.id);
							}
						})
						.catch((error) => {
							// this.$message.error(error.message);
						});
				} else {
					cancelCollectionInformation({ information_id: this.$route.params.id })
						.then((res) => {
							if (res.code == 200) {
								this.iscollect = false;
								this.getInformationDetails(this.id);
							}
						})
						.catch((error) => {
							// this.$message.error(error.message);
						});
				}
			} else {
				this.$PromptTip({ dialogVisible: true, showStatus: 1 });
			}
		},

		//微信分享方法
		WxSharMenu() {
			this.configWX(this.informationDetails.jsdata);
		},

		configWX(data) {
			this.appId = data.appId;
			this.timestamp = data.timesTamp;
			this.nonceStr = data.nonceStr;
			this.signature = data.signaTure;
			wx.config({
				//注意appId,timestamp,nonceStr,signature四个参数，就是把当前url作为参数请求接口，是接口返回生成的
				debug: false, //生产环境需要关闭debug模式
				appId: this.appId, //appId通过微信服务号后台查看
				timestamp: this.timestamp, //生成签名的时间戳
				nonceStr: this.nonceStr, //生成签名的随机字符串
				signature: this.signature, //签名
				jsApiList: ["updateAppMessageShareData", "updateTimelineShareData"], //需要调用的JS接口列表
			});
			//分享参数，标题，描述，链接，图片title,desc,link,imgUrl
			wx.ready(() => {
				wx.updateAppMessageShareData({
					title: this.sharetitle,
					desc: this.sharedescs,
					link: this.wxsharelink,
					imgUrl: this.shareimg,
					success: function () {
						// 设置成功
						//alert("分享朋友圈设置成功")
					},
				});
				wx.updateTimelineShareData({
					title: this.sharetitle,
					desc: this.sharedescs,
					link: this.wxsharelink,
					imgUrl: this.shareimg,
					success: function () {
						// 设置成功
						//alert(desc)
					},
				});
			});
		},

		getInformationDetails(id) {
			getInformationDetails({ id: id, url: this.wxsharelink }).then((res) => {
				if (res.code == 200) {
					this.informationDetails = res.data;
					this.updateMetaTags(this.informationDetails);
					this.informationDetails.content =
						"<p>" +
						this.informationDetails.content.replace(/\n/g, "</p><p>") +
						"</p>";
					this.getRecommendLists();
					this.homeHotList();
					this.author_id = res.data.author_id;
					this.gettoUserInfo();
					this.$pvuv.getEvent(
						"page",
						this.informationDetails.id,
						this.informationDetails.title,
						this.informationDetails.author_id
					);

					this.sharetitle = this.informationDetails.title;
					this.sharedescs =
						this.informationDetails.illustrate == null ||
						this.informationDetails.illustrate == undefined ||
						this.informationDetails.illustrate.lenght == 0
							? this.informationDetails.title
							: this.informationDetails.illustrate;
					this.WxSharMenu();
				} else {
					this.$message.error("当前快讯不存在1，已返回到快讯列表");
					// this.goBack();
				}
			});
		},
	},

	goBack() {
		console.log("123123");

		if (window.history.length > 1) {
			this.$router.go(-1);
		} else {
			this.$router.push("/news");
		}
	},
};
</script>

<style scoped>
.kuai_wz_pc {
	display: flex;
}
.kuai_wz_mobile {
	display: none;
}
.Main {
	padding-top: 20px;
}

.MainLeft {
	width: 760px;
}

.kxwzDate {
	margin-top: 10px;
	margin-bottom: 10px;
	font-size: 14px;
	font-family: "PingFang SC", "微软雅黑", "Helvetica Neue", "Hiragino Sans GB",
		"Microsoft YaHei", Arial, sans-serif;
	font-weight: 600;
	color: #9a9aa7;
}

.kxpj img {
	width: 15.7px;
	margin-left: 12px;
}

.kxItem_1 {
	font-size: 22px;
	font-family: "PingFang SC", "微软雅黑", "Helvetica Neue", "Hiragino Sans GB",
		"Microsoft YaHei", Arial, sans-serif;
	font-weight: 600;
	color: #000000;
	margin-top: 20px;
}
.kxItem_2 {
	font-size: 16px;
	line-height: 1.8;
	font-family: "PingFang SC", "微软雅黑", "Helvetica Neue", "Hiragino Sans GB",
		"Microsoft YaHei", Arial, sans-serif;
	color: #323241 !important;
	font-weight: 400;
}
.kxItem_2 p {
	font-size: 16px;
	margin-left: -14px;
	line-height: 30px;
	font-family: "PingFang SC", "微软雅黑", "Helvetica Neue", "Hiragino Sans GB",
		"Microsoft YaHei", Arial, sans-serif;
	font-weight: 400;
}
.kxItem_2 p span,
.kxItem_2 p a {
	font-size: 16px;
	font-family: "PingFang SC", "微软雅黑", "Helvetica Neue", "Hiragino Sans GB",
		"Microsoft YaHei", Arial, sans-serif;
	font-weight: 400;
	color: #fff;
}

.kxItem_3 {
	margin-top: 10px;
}

.btnitem {
	display: inline-block;
	margin-top: 10px !important;
	padding: 4px 6px;
	background: #2b2b2f;
	border-radius: 3px;
	margin-top: 7px;
	font-size: 12px;
	color: #fff;
}
.wz_detail_content_tag {
	column-gap: 10px;
	margin-top: 10px;
}
.wz_detail_content_tag div {
	padding: 4px 13px;
	background: #2b2b2f;
	font-family: PingFang SC;
	font-size: 12px;
	line-height: 1;
	font-weight: normal;
	/* 纯白 */
	color: #fff;
}
.wz_detail_pc_tip {
	border-top: 1px solid #fafafa;
	margin-top: 10px;
	padding-top: 10px;
	font-family: PingFang SC;
	font-size: 10px;
	font-weight: normal;
	line-height: 1.4;
	letter-spacing: 0em;
	/* 字段四级 */
	color: #d8d8d8;
	/* display: flex; */
}
.kxstepsBox {
	margin-top: 6px;
	margin-bottom: 2px;
	display: flex;
	justify-content: right;
}

.kxstepsBoxLeft {
	width: auto;
}

.kxItem_3 a {
	font-size: 12px;
	font-family: "PingFang SC", "微软雅黑", "Helvetica Neue", "Hiragino Sans GB",
		"Microsoft YaHei", Arial, sans-serif;
	font-weight: 600;
	color: #0056ff;
}

.MainRight {
	width: 360px;
}

.MainRight_1 {
	width: 100%;
	height: 58px;
	background: rgba(255, 255, 255, 0);
	border-radius: 4px 4px 4px 4px;
	opacity: 1;
	border: 1px solid #f7f7f7;
}

.MainRight_1 img {
	width: 28px;
	height: 33px;
	margin-left: 17px;
}

.MainRight_1 div {
	font-size: 12px;
	font-family: "PingFang SC", "微软雅黑", "Helvetica Neue", "Hiragino Sans GB",
		"Microsoft YaHei", Arial, sans-serif;
	font-weight: 600;
	color: #333333;
	margin-left: 12px;
}

.kxItem_3 .btnitembottom {
	margin-left: 0px;
	width: 20vw;
}
.kxItem_3 .btnitembottom div {
	margin-left: 10px;
	font-size: 14px;
}
.MainLeft_b {
	margin-top: 20px;
}
</style>
<style scoped>
@media screen and (max-width: 900px) {
	.wz_detail_info_right {
		column-gap: 12px;
	}
	.wz_detail_line {
		width: 1px;
		height: 12px;
		background: #fff;
	}
	.wz_detail_info_right img {
		width: 18px;
	}
	.kuai_wz_pc {
		display: none;
	}
	.kuai_wz_mobile {
		display: block;
	}
	.MainRight {
		display: none;
	}
	.MainLeft {
		width: 90%;
		margin: 0 auto;
	}
	.kxItem_1 {
		font-size: 20px;
		line-height: 1.5;
		font-family: "PingFang SC", "微软雅黑", "Helvetica Neue", "Hiragino Sans GB",
			"Microsoft YaHei", Arial, sans-serif;
		font-weight: 600;
		color: #fff;
		margin-top: 10px;
	}
	.kxItem_2 {
		margin-top: 6px;
	}
	.kxwzDate {
		font-size: 12px;
		color: #b6b9cc;
	}
	.kxItem_3 .btnitembottom {
		margin-left: 0px;
		width: 20vw;
	}
	.ql-editor {
		padding: 0 0;
	}
}
</style>
<style>
.MainLeft_tuijian {
	display: none;
}
.MainLeft_b {
	display: block;
}
.kxItem_img {
	display: none;
	width: 100%;
	height: auto;
}
.kxItem_img img {
	width: 100%;
	height: auto;
}
.ql-editor img {
}
@media screen and (max-width: 900px) {
	.MainLeft_b {
		display: none;
	}
	.MainLeft_tuijian {
		display: block;
		width: 100%;
		/* margin-left: 5%; */
		margin-top: 30px;
		box-shadow: 0px 0px 16px 1px rgba(0, 0, 0, 0.1);
		border-radius: 20px 20px 20px 20px;
		opacity: 1;
		margin-bottom: 30px;
	}
	.MainLeft_tuijian_title {
		font-size: 18px;
		line-height: 1;
		font-weight: 600;
		color: #fff;
	}

	.kxItem_2 p {
		font-size: 16px !important;
		margin-left: 0px !important;
		font-family: "PingFang SC", "微软雅黑", "Helvetica Neue", "Hiragino Sans GB",
			"Microsoft YaHei", Arial, sans-serif;
		color: #fff !important;
		font-weight: 400;
	}
	.kxItem_2 p span,
	.kxItem_2 p a {
		font-size: 16px !important;
		font-family: "PingFang SC", "微软雅黑", "Helvetica Neue", "Hiragino Sans GB",
			"Microsoft YaHei", Arial, sans-serif;

		color: #fff;
		font-weight: 400;
		color: #fff !important;
	}
}
</style>
